<template>
  <div class="login_warp">
    <!-- <m-head title="登录"></m-head> -->
    <div class="log_main">
      <p class="log_top_text">登录</p>
      <div class="log_form">
        <van-form>
          <van-field v-model="account" placeholder="请输入账号" @input="phoneChange" />

          <van-field class="log_YZM" v-model="password" placeholder="请输入密码"
            @input="phoneChange" type="password" />

          <van-button type="info" :disabled="submitBtn" block round @click="onSubmit"
            style="margin-top:50px;">登录
          </van-button>
        </van-form>
        <span class="mei">还没账号<em @click="goRegister">去注册</em></span>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import { getDetail } from "@/apiOptions/home_api.js";
  import { Notify } from "vant";

  import { Dialog, Button, Form, Field, Toast } from "vant";
  Vue.use(Button)
    .use(Form)
    .use(Field);

  import apiMar from "@/api/api";
  export default {
    components: {
      // MHead
    },
    data() {
      return {
        phoneNum: "",
        VerificationCode: "",
        CodeBtndisabled: true,
        submitBtn: true,
        CodeText: "获取验证码",
        CodeColor: "#C6C9D5", //#07c160
        submitColor: "#C6C9D5",
        submitBg: "#F2F3F7",
        time: 60,

        // zjz
        account: "",
        password: ""
      };
    },
    computed: {},
    watch: {},
    methods: {
      goRegister() {
        this.$router.push({
          path: "/register"
        });
      },
      onSubmit() {
        let params = {
          user_name: this.account,
          password: this.password
        };

        apiMar
          .login(params)
          .then(res => {
            console.log(res, "denglu");
            if (res.status) {
              // this.$tool.setlocalStorage({ token: res.token });

              window.localStorage.setItem("token", res.token);
              this.getInfo();

              this.$router.push({
                path: "/home"
              });
            }
          })
          .catch(err => {
            Notify({ type: "warning", message: err.message });
          });
      },
      getInfo() {
        let params = {};

        apiMar
          .userInfo(params)
          .then(res => {
            window.localStorage.setItem("userInfo", JSON.stringify(res));
          })
          .catch(err => {
            Notify({ type: "warning", message: err.message });
          });
      },
      phoneChange(val) {
        console.log(val, "val");
        if (this.account && this.password) {
          this.submitBtn = false;
        }
      },


    },
  };
</script>
<style lang="scss" scoped>
  .log_top_text {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    color: #222222;
    font-weight: 700;
    padding: 50px 0;
  }

  .login_warp {
    min-height: 100%;
    z-index: 9999;
    position: relative;

    .log_main {
      padding: 0 40px;
    }
  }

  .mei {
    display: block;
    font-size: 14px;
    color: #333;
    line-height: 2;
    text-align: center;

    em {
      font-style: normal;
      color: #1989fa;
    }
  }
</style>